<!-- ScheduledTask -->
<template>
  <div>
    <el-card class="box-card box-cardCustomer">
      <div slot="header"
           class="clearfix"
           @click="changeArrow">
        <img class="firstIcon"
             src="@/assets/ticket/tasks.png">
        <span>{{$t('custom.nextTicket.ticketscheduledTasks')}}</span>
        <i :class="arrowCustomer"></i>
      </div>
      <el-collapse-transition>
        <div v-show="showPanel"
             class="box-cardCustomer-content">
          <ejs-grid :dataSource="comDataList"
                      :allowResizing="gridSettings.allowResizing"
                      :queryCellInfo='customiseCell'
                      :allowFiltering="gridSettings.allowFiltering"
                      :filterSettings="gridSettings.filterSettings"
                      :allowPaging="gridSettings.allowPaging"
                      :toolbar="gridSettings.toolbar"
                      :allowTextWrap="gridSettings.allowTextWrap"
                      :showColumnChooser="gridSettings.showColumnChooser"
                      :allowReordering="gridSettings.allowReordering"
                      :allowSorting="gridSettings.allowSorting"
                      :editSettings="gridSettings.editSettings"
                      :allowExcelExport="gridSettings.allowExcelExport"
                      :allowPdfExport="gridSettings.allowPdfExport"
                      :toolbarClick='toolbarClick'
                      :height='280'
                      ref="ticketScheduleTask"
                      :pageSettings="gridSettings.pageSettings"
                      :sortSettings='sortOptions'
                      >
              <e-columns>
                <e-column field="ticketId"
                          headerText="Ticket ID"
                          :template='CWTicketIDFormartName'
                          width="150"></e-column>
                <e-column field="summary"
                          headerText="Ticket Summary"
                          width="200"></e-column>
                <e-column field="companyName"
                          headerText="Company Name"
                          width="200"></e-column>
                <e-column field="contactName"
                          headerText="Contact"
                          width="200"></e-column>
                <e-column field="identifier"
                          headerText="Resource"
                          width="200"></e-column>
                <e-column field="doneFlag"
                          headerText="Done"
                          width="200"></e-column>
                <e-column field="acknowledgedFlag"
                          headerText="Acknowledged"
                          width="200"></e-column>
                <e-column field="dateStart"
                          :template='TimeFormat'
                          headerText="Start Time"
                          width="200"></e-column>
                <e-column field="dateEnd"
                          headerText="End Time"
                          :template='TimeFormatEnd'
                          width="200"></e-column>
              </e-columns>
            </ejs-grid>
        </div>
      </el-collapse-transition>
    </el-card>
  </div>
</template>

<script>
import TimeFormat from './format/TimeFormat'
import TimeFormatEnd from './format/TimeFormatEnd'
import { GlobalDateformat } from '@/utils/common'
import CWTicketIDFormartName from './format/CWTicketIDFormartName'
export default {
  props: {
    nextTicketInfo: {
      type: Object,
      default: function () {
        return {}
      }
    },
    searchIdentifier: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      CWTicketIDFormartName: function () {
        return { template: CWTicketIDFormartName }
      },
      TimeFormat: function () {
        return { template: TimeFormat }
      },
      TimeFormatEnd: function () {
        return { template: TimeFormatEnd }
      },
      sortOptions: { columns: [{ field: 'dateStart', direction: 'Ascending' }] },
      arrowCustomer: 'el-collapse-item__arrow el-icon-arrow-right is-active  el-icon-arrowCustomer',
      showPanel: true,
      activePannel: ['pannel'],
      scheduleList: [],
      gridSettings: {
        showColumnMenu: true,
        allowResizing: true,
        allowFiltering: true,
        filterSettings: { type: 'Excel' },
        allowPaging: true,
        allowExcelExport: true,
        allowPdfExport: true,
        showColumnChooser: true,
        toolbar: ['PdfExport', 'CsvExport', 'ColumnChooser'],
        groupOptions: { columns: ['name'] },
        allowReordering: true,
        allowSorting: true,
        allowTextWrap: true,
        pageSettings: { pageSize: 30, pageSizes: [30, 50, 100, 200, 1000], pageCount: 4 },
        groupSettings: {
          allowReordering: false,
          columns: [],
          disablePageWiseAggregates: false,
          enableLazyLoading: false,
          showDropArea: true,
          showGroupedColumn: false,
          showToggleButton: false
        }
      }
    }
  },

  computed: {
    comDataList () {
      var tempList = []
      tempList = this.scheduleList
      return tempList
    }
  },
  methods: {
    initData (id) {
      this.getScheduleDataList(id)
    },
    formatData (value) {
      return GlobalDateformat(value, this.$store.state.user.timeFormat)
    },
    contrastTime (date1, date2) {
      var oDate1 = new Date(date1).getTime()
      var oDate2 = new Date(date2).getTime()
      let result
      if (oDate1 > oDate2) result = 1
      else if (oDate1 === oDate2) result = 2
      else result = 3
      return result
    },
    customiseCell (args) {
      let currDate = new Date().toLocaleDateString()
      let listDate = this.formatData(args.data.dateStart)
      let reslut = this.contrastTime(currDate, listDate)
      // if (args.column.foreignKeyField === 'dateEntered') {
      if (reslut === 1) {
        args.cell.style.backgroundColor = '#FFEBE6'
      } else if (reslut === 2) {
        args.cell.style.backgroundColor = '#E3FCEF'
      }
      // }
    },
    changeArrow () {
      this.arrowCustomer = this.arrowCustomer === 'el-collapse-item__arrow el-icon-arrow-right el-icon-arrowCustomer'
        ? 'el-collapse-item__arrow el-icon-arrow-right is-active  el-icon-arrowCustomer'
        : 'el-collapse-item__arrow el-icon-arrow-right el-icon-arrowCustomer'
      this.showPanel = !this.showPanel
    },
    getScheduleDataList (id) {
      let params = {}
      params.ticketId = id
      this.$interface.apiManager.getCwTicketScheduledbyTicketId(params).then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.scheduleList = res.data
      })
    },
    toolbarClick (args) {
      switch (args.item.text) {
        case 'PDF Export':
          (this.$refs['ticketScheduleTask']).pdfExport()
          break
        case 'Excel Export':
          (this.$refs['ticketScheduleTask']).excelExport()
          break
        case 'CSV Export':
          (this.$refs['ticketScheduleTask']).csvExport()
          break
      }
    }
  }
}
</script>
<style scoped >
.box-cardCustomer >>> .el-card__body {
  padding: 0px !important;
}
.box-cardCustomer >>> .el-card__header {
  cursor: pointer;
  height: 59px;
  padding: 18px 10px;
}
.firstIcon {
  height: 20px;
  width: 20px;
  margin-top: -4px;
}
.detail {
  float: right;
  margin-right: 20px;
  font-weight: 400;
  color: #138dc7;
}
.clearfix > span:nth-child(2) {
  margin-left: 10px;
  height: 22px;
  font-size: 16px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.85);
  line-height: 22px;
}
.clearfix > span:nth-child(3) {
  margin-left: 10px;
  color: #138dc7;
  font-weight: 500;
}

.table1row {
  font-weight: 400;
  color: rgba(0, 0, 0, 0.65);
  line-height: 22px;
  text-align: left;
  color: rgba(0, 0, 0, 0.5);
  background: #ffffff;
  border-radius: 2px;
  border: 1px solid #f0f0f0;
  margin-left: 28px;
  padding-left: 24px;
  padding-top: 8px;
  padding-bottom: 8px;
  border-top: none;
}
.table1row:nth-of-type(1) {
  border-top: 1px solid #f0f0f0;
}
.table1row > div:nth-child(1) {
  font-weight: 600;
  color: rgba(0, 0, 0, 0.5);
}
.table1row > div:nth-child(2) {
  font-weight: 600;
  color: #000000;
}
.box-cardCustomer-content {
  padding: 10px;
}
.clearfix {
  vertical-align: middle;
  text-align: left;
}
.el-icon-arrowCustomer {
  float: right;
  padding: 3px 0;
}
</style>
